<script setup>
import { defineEmits, defineProps, ref, watch } from "vue";
import axios from "@/util/axios";
import { ElMessage } from "element-plus";
import { QuillEditor } from "@vueup/vue-quill";

// 定义组件接收的属性
const props = defineProps({
   // 商品的唯一标识，类型为数字，默认值为 -1，并且是必须要传递的属性
  id: {
    type: Number,
    default: -1,
    required: true,
  },
   // 对话框详情的标题，类型为字符串，默认值为 null，也是必须要传递的属性
  detailsTitle: {
    type: String,
    default: null,
    required: true,
  },
   // 用于控制对话框是否可见的布尔值，默认值为 false，同样是必须传递的属性
  detailsVisible: {
    type: Boolean,
    default: false,
    required: true,
  },
});

// 1、创建一个响应式对象ruleForm，用于存储商品相关的表单数据，初始值设置了各个字段的默认情况
const ruleForm = ref({
  id: -1,
  name: "",
  price: null,
  stock: null,
  type: {
    id: "",
  },
  description: "",
  productIntroImgs: "",
  productParaImgs: "",
});

// 用于存储当前选择的商品大类的ID，是一个响应式数据
const fruitTypeId = ref("");
// 存储商品大类（水果类型）下拉框的选项数据，响应式数据，初始为空数组
const fruitTypeSelectOptions = ref([]);
// 存储商品小类下拉框的选项数据，响应式数据，初始为空数组
const classifySelectOptions = ref([]);

// 2、初始化商品大类下拉框的选项列表
// 它通过axios发起GET请求到 "admin/fruitType/listAll" 接口获取数据，并将返回的数据中的果蔬类型列表赋值给fruitTypeSelectOptions.value
const initFruitTypeSelectList = async () => {
  const res = await axios.get("admin/fruitType/listAll");
  fruitTypeSelectOptions.value = res.data.fruitTypeList;
};

// 3、根据传入的果蔬类型ID（fruitTypeId）来初始化商品小类下拉框的选项列表
// 首先会清空ruleForm中商品类型的ID字段，然后发起GET请求到 "admin/classify/listAll/{fruitTypeId}" 接口获取对应的数据，
// 并将返回的商品小类列表赋值给classifySelectOptions.value
const initClassifySelectList = async (fruitTypeId) => {
  ruleForm.value.type.id = "";
  const res = await axios.get("admin/classify/listAll/" + fruitTypeId);
  classifySelectOptions.value = res.data.classifyList;
};
// 调用函数初始化商品大类下拉框的选项列表
initFruitTypeSelectList();

// 4、定义表单验证规则，是一个响应式对象
const rules = ref({
  name: [
    {
      required: true,
      message: "请输入商品名称！",
    },
  ],
    // 商品价格的验证规则，必填且要求输入的值为数值类型，有相应的提示信息和数据转换函数（将输入值转换为数字类型）
  price: [
    { required: true, message: "请输入商品价格!" },
    {
      type: "number",
      message: "商品价格是数值类型！",
      transform: (value) => Number(value),
    },
  ],
   // 商品库存的验证规则，与商品价格类似，必填且要求是数值类型，有对应提示和转换函数
  stock: [
    { required: true, message: "请输入商品库存!" },
    {
      type: "number",
      message: "商品库存是数值类型！",
      transform: (value) => Number(value),
    },
  ],
  description: [
    {
      required: true,
      message: "请输入商品描述！",
    },
  ],
});

const ruleFormRef = ref(null);


// 修改
// （一）、根据传入的商品ID（id）初始化表单数据
    // 先获取商品详情数据，然后根据数据设置相关响应式数据的值，如商品大类、小类等信息
const initFormData = async (id) => {
  // 发起GET请求获取指定ID的商品详情数据
  const res = await axios.get("admin/product/"+id);
  // 设置当前选择的商品大类ID，若不存在则设为空字符串
  fruitTypeId.value = res.data.product.type.fruitType.id || "";
  // 根据获取到的大类ID初始化商品小类下拉框的选项列表
  initClassifySelectList(fruitTypeId.value)
  // 将获取到的商品详情数据赋值给ruleForm，用于表单展示商品信息
  ruleForm.value = res.data.product;
};

// 当商品大类下拉框选项改变时触发的函数，用于重新初始化商品小类下拉框的选项列表
const handleFruitTypeChange = (fruitTypeId) => {
  console.log("fruitTypeId=" + fruitTypeId);
  initClassifySelectList(fruitTypeId);
};

watch(
  //里面有两个参数，第一个props监听哪个参数，监听props中的detailsVisible属性，当它的值发生变化时执行后面的函数
  () => props.detailsVisible,
  //第二个监听后要执行的哪个操作，监听后要执行的操作，根据传入的id值来决定初始化表单数据还是重置表单数据
  () => {
    console.log("id=" + props.id);
    let id = props.id;
    if (id != -1) {
      initFormData(id);
    } else {
      ruleForm.value = {
        id: -1,
        name: "",
        price: null,
        stock: null,
        type: {
          id: "",
        },
        description: "",
        productIntroImgs: "",
        productParaImgs: "",
      };
    }
  }
);

// 定义父组件事件，这里定义了三个可以向父组件触发的事件名称
const emits = defineEmits([
  "update:modelValue",
  "initBigTypeList",
  "initProductList",
]);

// 关闭对话框的函数，触发 "update:modelValue" 事件通知父组件将对话框隐藏，传入false表示隐藏对话框
const handleClose = () => {
  console.log("xxx");
  // 调用执行，向父组件发送事件及对应的值，这里是通知父组件更新对话框的显示状态为隐藏
  emits("update:modelValue", false);
};


// 5、确认按钮点击时执行的函数，用于验证表单数据并提交保存商品信息
const handleConfirm = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      // 如果商品类别未选择（ID为空字符串），则提示用户选择商品类别并终止后续操作
      if (ruleForm.value.type.id == "") {
        ElMessage.error("请选择商品类别");
        return;
      }
      // 发起POST请求，将表单数据（商品信息）发送到 "admin/product/save" 接口进行保存
      let result = await axios.post("admin/product/save", ruleForm.value);
      let data = result.data;
      if (data.code == 0) {
         // 如果保存成功，显示成功提示信息，重置表单字段，触发 "initProductList" 事件通知父组件更新商品列表，然后关闭对话框
        ElMessage.success("执行成功");
        ruleFormRef.value.resetFields();
        emits("initProductList");
        handleClose();
      } else {
        // 如果保存失败，根据接口返回的错误信息显示相应的错误提示
        ElMessage.error(data.msg);
      }
    } else {
      console.log("fail");
      return false;
    }
  });
};
</script>

<template>
  <!-- Dialog 对话框实现详情按钮弹窗显示， 饿了么ui组件 -->
  <!-- model-value是否显示 Dialog -->
  <!-- title说明：Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入 -->
  <!-- detailsVisible是从父组件order下index传过来 -->
  <el-dialog model-value="detailsVisible" :title="detailsTitle" width="50%">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="ruleForm.name" style="width: 400px" />
      </el-form-item>

      <el-form-item label="商品价格" prop="price">
        <el-input v-model="ruleForm.price" style="width: 100px" />
      </el-form-item>

      <el-form-item label="商品库存" prop="stock">
        <el-input v-model="ruleForm.stock" style="width: 100px" />
      </el-form-item>

      <el-form-item label="商品类别">
        <!-- textarea文本域   rows行数  -->
        <el-select
          v-model="fruitTypeId"
          placeholder="请选择商品大类......"
          style="width: 200px"
          @change="handleFruitTypeChange"
        >
          <el-option
            v-for="item in fruitTypeSelectOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-select
          v-model="ruleForm.type.id"
          placeholder="请选择商品小类......"
          style="width: 200px"
        >
          <el-option
            v-for="item in classifySelectOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品描述" prop="description">
        <!-- textarea文本域   rows行数  -->
        <el-input v-model="ruleForm.description" type="textarea" :rows="4" />
      </el-form-item>

      <el-form-item label="商品介绍"> </el-form-item>
      <QuillEditor
        v-model:content="ruleForm.productIntroImgs"
        contentType="html"
        toolbar="full"
        theme="snow"
        style="height: 200px"
      />
      <el-form-item label="商品参数"> </el-form-item>
      <QuillEditor
        v-model:content="ruleForm.productParaImgs"
        contentType="html"
        toolbar="full"
        theme="snow"
        style="height: 200px"
      />
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button type="primary" @click="handleClose">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
</style>


